<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2D转换模块</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;	
		}
		ul {
			width: 800px;
			height: 500px;
			margin: 0 auto;
			border: 1px solid black;
		}
		ul li {
			list-style: none;
			width: 100px;
			height: 50px;
			background-color: red;
			margin: 0 auto;
			margin-top: 50px;

		}
		ul li:nth-child(2) {
			/* 旋转 */
			transform: rotate(45deg);
		}
		ul li:nth-child(3) {
			/* 平移 */
			transform: translate(25px, 50px)
		}
		ul li:nth-child(4){
			/* 缩放 ，取值为1表示和原有一样，水平和垂直都一样可以只写一个*/
			transform: scale(1.5, 1.5);
		}
		ul li:nth-child(5) {
			/* 注意点；
			1.如果需要进行多个转换，那么用空格隔开
			2.2D的转换模块会修改元素的坐标系， 那么旋转之后再平移就不是水平平移的

			 */
			transform: rotate(45deg) translate(50px,0px);
		}	
	</style>
</head>
<body>
	<!-- transform英 [trænsˈfɔ:m]: 变形， 转型
	translate [trænsˈleɪt] 翻译;转化;解释;被翻译,平移
 2D 转换方法：
	rotate英 [rəʊˈteɪt]   美 [ˈroʊteɪt]（使某物）旋转;使转动;使轮流，轮换;交替
	scale[skeɪl] 规模;比例（尺）;鱼鳞;级别
	skew [skju:]   美 [skju] 斜的，歪的;[数学]
	matrix ˈmeɪtrɪk' 矩阵
	rotaeX/Y/Z

	transform-origin: 0px 0px; 形变中心点

	perspective [pəˈspektɪv] : 500px;  透视属性， 500px表示看的距离
		值越小， 透视越严重
	
	shdaow:ˈʃædəʊ' 阴影;影子
	blur 模糊;
	box-shadow: 0 0 10px;
	spread： 伸开，传播
	box-shadow:h-shadow v-shadow blur spread color inset(内外阴影)
	 -->
	<ul>
		<li>正常的</li>
		<li>选转的</li>
		<li>平移的</li>
		<li>缩放的</li>
		<li>综合的</li>
	</ul>
	
</body>
</html>